Objectifs : Dans cette version, vous allez définir une liste de personnalités, une liste de photos et une liste de discours, et ajouter un composant (spinner) sous chaque photo pour choisir dans cette liste. Puis vous verrez comment naviguer dans les listes. Dans les versions suivantes, nous verrons comment partager des playlists sur Internet, avec les étapes suivantes : lire les images et enregistrements sur le Web, réorganiser les listes en liste unique, avec la notion de dictionnaire, lire sur Internet un catalogue au format JSON et le convertir en liste de dictionnaires, modifier et vérifier un catalogue JSON (JavaScript Object Notation), changer de catalogue et créer une playlist sur le Drive.

Point de départ:

Pour cette leçon, vous pouvez repartir de la version précédente de l'application ou importer cette version Prenez soin d'enregistrer votre version de travail avec un nouveau nom, par exemple : playlistV3.

A faire : porposer une version 2a où les media sont déjà chargés

Description des travaux

• Dans la partie design :
  • Importer des images et bandes son pour compléter celles déjà disponibles,
  • Ajouter un arrangement horizontal avec deux spinners (ou curseurs animés) sous les boutons.
• Dans la partie programmation / blocs :
  • initialiser
    • une variable "titles" avec la liste des auteurs,
    • une variable "images" avec la listes des images,
    • une variable "audios" avec la listes des enregistrements audio.
  • mettre les auteurs (titles) dans la liste des éléments affichés par les spinners (curseurs animés),
  • coder les actions liées au choix de l'utilisateur quand il sélectionne un auteur, c'est à dire :
    • récupérer l'index de la ligne sélectionnée dans le spinner (ou curseur animé),
    • affecter au bouton (1° ou 2°) l'image correspondante (même index)dans la liste des images,
    • affecter au lecteur (1° ou 2°) le fichier audio correspondant dans la liste des fichiers audios.

Réalisation / Design

Importation des données :

Pour cette version, nous allons utiliser une liste d'images et fichiers audio complémentaires, proposés à cette adresse .
Téléchargez sur votre ordinateur les paires d'images et sons que vous souhaitez : Martin Luther King, Malcolm X, Robert Badinter, Simone Veil, ... A chaque fois il faut choisir l'image (.jpg ou .png) et le fichier son (.mp3) qui vont ensemble. Une fois que vous avez téléchargé ces paires d'images et sons, importez les dans votre projet App Inventor (en bas à droite : bouton "charger fichier" dans l'onglet media).

Vous pouvez aussi choisir vos propres images et sons. Ils doivent être de petite taille, en format portrait (une largeur de 140 pixels suffit). Pour l'instant, la taille totale des fichiers ne doit pas dépassser 2,5 MO. Nous verrons plus loin comment nous affranchir de cette limite.

Composants d'interface :

• Ajoutez un arrangement horizontal, centré, en largeur "remplir parent",
• Dans cet arrangement ajoutez deux curseurs animés (ou spinners) curseurAnime1 et curseurAnime2, en largeur 50%.
• Renommez également les boutons en bouton1 et bouton2, et les lecteurs en lecteur1 et lecteur2, car ils ne sont plus liés à un personnage spécifique.

Réalisation : Blocs et programme

Création des listes : variables titles, images et audios

Nous allons à présent utiliser un nouveau type de variable : les listes.

Leur intérêt est de pouvoir contenir une liste de valeurs, dans notre cas une liste d'auteurs (titles), d'images (images) ou de sons (audios).

Les listes sont associées à une catégorie de blocs spécifiques qui permettent de lire, modifier, ajouter ou supprimer des éléments de la liste. Nous utiliserons ici le bloc qui permet de créer des listes, et celui qui permet d'obtenir ou de récupérer l'élément de la liste qui se trouve à un numéro ou un index particulier.

Commencez par créer ou initialiser 3 listes :

1. titles : dans laquelle on met les noms de personnes,
2. images : dans laquelle on met les noms de fichiers image,
3. audios : dans laquelle on met les noms de fichiers son.

Initialisez ces 3 variables et avec le bloc "créer une liste", ajoutez des lignes en cliquant sur la roulette du bloc et renseignez les valeurs avec le nom des fichiers image et son que vous avez importés plus haut.
Attention, le nom des fichiers doit être exactement celui des fichiers importés, en respectant la casse (majuscules et minuscules). Pour éviter les erreurs,le mieux est de copier/coller les noms de fichiers depuis le répertoire d'origine.

C'est le numéro ou l'index dans la liste qui donne la correspondance entre le nom(titles), l'image et le son.

Définir les noms affichés par les curseurs animés :

Au démarrage de l'application (quand screen1.initialise), on va

1. indiquer que la liste des noms proposés par les curseurs animés est la liste des personnes,
   Pour ça il suffit d'affecter la liste des noms (titles) à la propriété "éléments" du curseur animé.
2. et préciser que l'élément affiché au départ est le 1° de la liste pour le 1° curseur, et le 2° pour le 2° :
   Pour ça on affecte 1 et 2 à la propriété "indice de sélection" du 1° et 2° curseur animé.

Afficher l'image et jouer l'audio correspondant à la sélection de l'utilissteur :

La sélection par l'utilisateur, d'un nom sur un des curseurs animés (ou spinner) va déclencher l'évènement : curseurAnime.AprèsSélection.
Lorsque cet évènement se déclenche, il faut :

1. récupérer dans la liste des images, le nom de fichier à afficher, et affecter ce fichier à l'image de fond du bouton (1 ou 2).
2. récupérer dans la liste des audios, le nom de fichier audio à jouer, et affecter ce fichier à la source du lecteur audio (1 ou 2).

Il est important que vous preniez le temps de bien comprendre comment on fait, car la navigation dans les listes vous sera très utile en programmation.

Notez tout d'abord que l'évènement curseurAnime.AprèsSélection renvoie en paramètre le nom sélectionné, mais ça n'est pas cette information qui nous intéresse, c'est le numéro ou l'index de la ligne sélectionnée.

Ce numéro ou index se trouve dans la propriété "curseur_animé.Indice sélection"

On va utiliser cet indice pour aller chercher le nom de l'image à récupérer dans la liste des images, avec le bloc
choisir dans la liste des images, l'élément qui se trouve à l'index sélectionné par le curseur :

Puis on va dire que ce fichier image doit être affecté à l'image du bouton
Et on fait la même chose pour aller chercher le fichier audio à récupérer dans la liste des audios, puis l'affecter comme source du lecteur audio :

Ce qui conduit à l'ajout de l'ensemble des blocs suivants pour les deux curseurs animés :

Tests et mise au point (debug)

En faisant les essais, vous remarquerez probablement qu'au démarrage, les images et sons correspondent à ceux définis dans la partie design. Ils ne correspondent pas (ou seulement par hasard) aux sélections affichées par les curseurs. Pourquoi à votre avis ?

Essayez d'identifier la raison et de corriger le problème avant de lire la suite.
...
...

Pour que l'image et le son correspondent à la sélection de chaque curseur animé, sans même avoir effectué de séelction, il faut le dire. On doit faire - au démarage - la même chose que si on avait cliqué sur chacun des curseurs. On peut donc dupliquer le code correspondnat, mais il vaut mieux le mettre dans une procédure et appeler cette proécédure au démarrage et quand on clique sur un curseur.

Résultat

Pour les deux curseurs et avec les procédures "setBouton1" et "setBouton2" ça conduit à ce résultat :